<template>
  <view class="root">
    <!--banner-->
    <swiper class="swiper" v-if="info">
      <swiper-item v-for="(item,i) in info.image" :key="i" class="banner">
        <image :src="item" mode="aspectFill" class="img" @click="handleViewImage(item)"/>
      </swiper-item>
    </swiper>

    <view class="desc" v-if="info">
      <view class="title">{{ info.title }}</view>
      <view class="content">{{ info.remark }}</view>
    </view>

    <view class="info" v-if="info">
      <image class="avatar" :src="info.headimg"></image>
      <view class="name">{{ info.nickname }}</view>
    </view>
  </view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  data() {
    return {
      info: null,
      id: null,
    }
  },
  computed: {},
  methods: {
    handleViewImage(item){
      uni.previewImage({
        urls: this.info.image,
        current: item
      });
    },
    getInfo() {
      Api.getWorksDetail(this.id).then(res => {
        this.info = res;
      })
    },
    refresh() {
      this.getInfo();
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.id = options.id;
    this.refresh();
  },
  onPullDownRefresh() {
    this.refresh();
  },
}
</script>

<style scoped lang='scss'>
.root {
  padding-bottom:calc( env(safe-area-inset-bottom) + #{r(20px)});
}


.swiper {
  height: r(1000px);
  width: 100%;

  .img {
    width: 100%;
    height: 100%;
  }
}

.desc {
  background-color: white;
  padding: r(60px 40px);

  .title {
    font-size: r(35px);
    font-weight: bold;
  }

  .content {
    margin-top: r(50px);
    font-size: r(30px);
    color: #333333;
  }
}

.info{
  background-color: white;
  margin: r(20px);
  border-radius: r(20px);
  display: flex;
  padding: r(30px);
  align-items: center;

  .avatar{
    width: r(100px);
    height: r(100px);
    border-radius: 50%;
  }

  .name{
    font-size: r(50px);
    margin-left: r(20px);
  }
}
</style>